//
//  HTEpView.swift
//  MagaCore
//
//  Created by MrMessy on 2023/5/30.
//

import SwiftUI

struct HTEpView: View {

  @Binding var var_selEp_id: String?
  @Binding var var_selEp: HTEp!
  @Binding var var_source: String
  
  @State private var var_animeInfo: HTAnime!
  @State private var var_onShowDialog: (() -> Void)?
  @State private var var_onSelEp: ((HTEp) -> Void)?
  @State private var var_epList: [HTEp]!

  init(var_selEp_id: Binding<String?>, var_animeInfo: HTAnime, var_selEp: Binding<HTEp?>, var_source: Binding<String>, var_onShowDialog: (() -> Void)? = nil, var_onSelEp: ((HTEp) -> Void)? = nil) {
    _var_selEp_id = var_selEp_id
    _var_animeInfo = State(initialValue: var_animeInfo)
    _var_selEp = var_selEp
    _var_source = var_source
    _var_onShowDialog = State(initialValue: var_onShowDialog)
    _var_onSelEp = State(initialValue: var_onSelEp)
    _var_epList = State(initialValue: var_animeInfo.ht_allEps())
  }

  var body: some View {
    VStack(alignment: .leading, spacing: 0) {
      HStack(spacing: 0) {
        Text("Episode")
          .ht_commonTextStyle(color: Color(hex: var_darkColor), fontSize: var_h3, weight: .bold)
        Spacer()
        Button() {
          var_onShowDialog!()
          HTNetworkManager().ht_requestForBuried(.htEnumMoviePlayCl(var_movie_id: var_animeInfo!.var_id, var_movie_name: var_animeInfo!.var_title ?? "", var_kid: "10", var_source: var_source, var_eps_id: var_selEp.var_id ?? "", var_eps_name: var_selEp.var_title ?? "", var_movielist_id: "", var_secname: "", var_subtitle: "1", var_m_type: "2", var_ori_type: "1"))
        } label: {
          HStack(spacing: 2){
            Text(var_animeInfo?.var_ep ?? "")
              .ht_commonTextStyle(color: Color(hex: var_lightColor), fontSize: var_h4, weight: .none)
            Image("seeall")
              .resizable()
              .frame(width: 14, height: 14)
          }
          .padding(.trailing, 15)
        }
      }
      ScrollView(.horizontal, showsIndicators: false){
        ScrollViewReader { var_scroll in
          LazyHStack(spacing: 10) {
            ForEach(0..<(var_epList ?? []).count, id:\.self) { index in
              let var_ep = var_epList?[index]
              let var_isSelected = var_ep?.var_id == var_selEp_id

              ZStack(alignment: .topTrailing){
                VStack(alignment: .leading, spacing: 0) {
                  Text("Ep " + (var_ep!.var_eps_num ?? ""))
                    .ht_commonTextStyle(color: var_isSelected ? Color(hex: var_orangeColor) : Color(hex: var_darkColor), fontSize: var_h5, weight: .none)
                    .padding(.top, 7)
                  Text(var_ep?.var_title ?? "")
                    .ht_commonTextStyle(color: var_isSelected ? Color(hex: var_orangeColor) : Color(hex: var_darkColor), fontSize: var_h4, weight: var_isSelected ? .bold : .none)
                    .padding(.top, 4)
                    .padding(.bottom, 8)
                    .lineLimit(2)
                }
                .frame(width: 120, height: 66, alignment: .topLeading)
                .padding(.leading, 10)
                .padding(.trailing, 10)
                .background(var_isSelected ? var_orangeBg : Color(UIColor(white: 0, alpha: 0.04)))
                .cornerRadius(4)
                .padding(.top, 8)
                if (var_ep?.var_dub == "1") {
                  Text("DUB")
                    .ht_commonTextStyle(color: Color.white, fontSize: 6, weight: .bold)
                    .frame(width: 21, height: 16)
                    .background(Color(hex: var_purpleColor))
                    .cornerRadius(4, corners: [.bottomLeft, .topRight])
                    .offset(x: 0, y: 8)
                }
              }
              .id(var_ep!.var_id)
              .onTapGesture {
                if let var_ep = var_epList?[index] {
                  if !var_isSelected {
                    var_onSelEp!(var_ep)
                  }
                }
              }
            }
            .onChange(of: var_selEp_id, perform: { new_value in
              if new_value != nil {
								var_scroll.scrollTo(new_value, anchor: .center)
              }
            })
						.onAppear{
							var_scroll.scrollTo(var_selEp_id, anchor: .center)
						}
          }
        }
      }
      .frame(maxWidth: .infinity)
    }
    .padding(.leading, 15)
    .padding(.top, 30)
  }
}
